<html>
<head>
    <title>模块维护</title>
    <meta charset="utf-8">
    <link rel="shortcut icon" href="../../images/favicon.ico" type="image/x-icon"/>
    <link rel="stylesheet" href="../../../res/layui/css/layui.css" media="all"/>
    <script type="text/javascript" src="../../../res/js/jquery-3.4.1.min.js"></script>
    <script type="text/javascript" src="../../../res/layui/layui.js" charset="utf-8"></script>
    <link rel="stylesheet" href="../../../res/css/bootstrap.css" media="all"/>
    <script type="text/javascript" src="module/common.js"></script>
    <script type="text/javascript" src="../../lib/loading/okLoading.js"></script>
    <style>
        #test13{
            position: absolute;
            top: 42px;
            left: 0px;
            padding: 5px 0px;
            min-width:97%;
            max-height: 50px;
            border: 1px solid #d2d2d2;
            overflow-y:auto;
            max-height:300px;
            z-index: 999;
            background-color:#fff;
            border-radius:2px;
            box-shadow:0 2px 4px rgba(0,0,0,.12);
            box-sizing: border-box;
            animation-duration: .3s;
        }

    </style>
</head>
<body>

<form class="layui-form" action="" style="margin-top: 20px;" lay-filter="myfrom" id="myfrom1">
    <input type="hidden" name="moduleId" id="moduleId">
    <input type="hidden" name="rank" id="rank">
    <input type="hidden" name="modModuleId" id="mid">
    <div class="layui-form-item">
        <label class="layui-form-label">权限</label>
        <div class="layui-input-block">
            <input type="radio" lay-filter="radio" name="type" checked value="1" title="目录" >
            <input type="radio" lay-filter="radio" name="type" value="2" title="菜单" >
            <input type="radio" lay-filter="radio" name="type" value="3" title="按钮">
        </div>
    </div>
    <div class="layui-form-item">
        <label  class="layui-form-label" style="width: 90px;">上级模块</label>
        <div class="layui-input-block">
            <input type="text" id="tree2" lay-filter="tree2" class="layui-input">
        </div>
    </div>
    <div class="layui-form-item" id="location">
        <label class="layui-form-label" style="width: 90px;">URL地址</label>
        <div class="layui-input-block">
            <input type="text" id="url" name="moduleLocation" style="width: 97%;"  placeholder="网址，若要设置为菜单模块必填，否则地址404"
                   autocomplete="off" class="layui-input">
        </div>
    </div>
    <div class="layui-form-item" id="accredit">
        <label class="layui-form-label" style="width: 90px;">授权标识</label>
        <div class="layui-input-block">
            <input type="text" id="perms" name="perms" style="width: 97%;"  placeholder="多个用逗号分隔,如：user:list,user:add"
                   autocomplete="off" class="layui-input">
        </div>
    </div>
    <div class="layui-form-item" id="flag">
        <label class="layui-form-label" style="width: 90px;">选择图标</label>
        <div class="layui-input-block">
            <input type="text" id="iconPicker"   value="layui-icon-star-fill"  name="icon" lay-filter="iconPicker" class="layui-input" >
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label" style="width: 90px;">模块名称</label>
        <div class="layui-input-inline">
            <input type="text" name="moduleName" id="moduleName" lay-verify="required" lay-reqtext="模块名称是必填项，岂能为空？" placeholder="模块名称"
                   autocomplete="off" class="layui-input" style="margin-left: 20px;">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label" style="width: 90px;">是否有效</label>
        <div class="layui-input-inline" style="margin-left: 20px;">
            <select name="whetherValid" id="whetherValid" lay-filter="aihao">
                <option value="1" selected="">是</option>
                <option value="2">否</option>
            </select>
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label" style="width: 90px;">模块说明</label>
        <div class="layui-input-block">
            <textarea name="comments" style="width: 97%;" id="comments" placeholder="请输入内容"
                      class="layui-textarea"></textarea>
        </div>
    </div>

    <div class="layui-form-item">
        <div class="layui-input-block">
            <button type="reset" class="layui-btn layui-btn-primary">重置</button>
            <button type="button" class="layui-btn" lay-submit="" lay-filter="myform">立即提交</button>
        </div>
    </div>

</form>
</body>
<script type="text/javascript" src="/ok-admin/pages/module/module/common1.js" charset="utf-8"></script>
<script>

    layui.use(['treeSelect','form','tree', 'util', 'layedit', 'laydate', 'iconPicker','jquery'], function () {
        var form = layui.form
            , layer = layui.layer
            , layedit = layui.layedit
            , laydate = layui.laydate
            ,tree = layui.tree
            ,util = layui.util,
            treeSelect= layui.treeSelect,
            $ = layui.$;

        //定义图标选择器
        var iconPicker = layui.iconPicker;

        //图标选择器
        iconPicker.render({
            // 选择器，推荐使用input
            elem: '#iconPicker',
            // 数据类型：fontClass/unicode，推荐使用fontClass
            type: 'fontClass',
            // 是否开启搜索：true/false
            search: true,
            // 点击回调
            click: function (data) {
                //设置选中的值
                $("#iconPicker").val(data.icon);
                console.log(data);
            }
        });

        /**
         * 选中图标 （常用于更新时默认选中图标）
         * @param filter lay-filter
         * @param iconName 图标名称，自动识别fontClass/unicode
         */
        iconPicker.checkIcon('iconPicker', "layui-icon-tree");


        /**
         * 监听单选点击事件
         */
         form.on('radio(radio)', function (e) {
            if($("input[type=radio][name=type]:checked").val()=='1'){//目录
                $("#location").hide();  //地址隐藏
                $("#accredit").hide();  //授权隐藏
                $("#flag").show(); // 图标显示
            }else if(e.value=='2'){ //菜单
                $("#location").show();
                $("#accredit").show();
                $("#flag").show();
            }else{//按钮
                $("#location").hide();
                $("#accredit").show();
                $("#flag").hide();
            }
        })

        var url = "/perModule/showAllModule";
        //无连接线风格 返回List Json
        treeSelect.render({
            emptText: '暂无数据',
            // 选择器
            elem: '#tree2',
            // 数据
            data: url,
            // 异步加载方式：get/post，默认get
            type: 'post',
            // 占位符
            placeholder: '不选为根模块',
            // 是否开启搜索功能：true/false，默认false
            search: true,
            style: {
                folder: {
                    enable: true
                },
                line: {
                    enable: true
                }
            },
            // 点击回调
            click: function(d){
                //将所提交的父级iD赋值给name为name=modModuleId
                $("#mid").val(d.current.id);
                console.log(d.current);
            },
            // 加载完成后的回调函数
            success: function (d) {
                console.log(d);
//                选中节点，根据id筛选
                //表单赋值
                var id = getQueryString("id");
                console.info(id);
                if (id) {
                    var url = "/perModule/findById";
                    var data = {id: id};
                    $.post(url, data, function (obj) {
                        //判断是否为一级模块,为一级模块则上级模块不需要赋值
                        if(obj.modModuleId!='max'){
                            treeSelect.checkNode('tree2', (obj.modModuleId));
                        }
                        //当图标不为空 就赋值
                        if(obj.icon) {
                            //选中图标 （常用于更新时默认选中图标）
                            iconPicker.checkIcon('iconPicker', obj.icon);
                        }
                        //表单赋值
                        form.val('myfrom', obj);
                        //当图标为空 默认给图标赋值
                        if(obj.icon=='' || obj.icon==null){
                            //设置默认值
                            form.val('myfrom',{
                                "icon":"layui-icon-tree"
                            })
                        }
                        //根据状态显示框
                        if(obj.type=='1'){
                            $("#location").hide();  //地址隐藏
                            $("#accredit").hide();  //授权隐藏
                            $("#flag").show(); // 图标显示
                        }else if(obj.type=='2'){
                            $("#location").show();
                            $("#accredit").show();
                            $("#flag").show();
                        }else{//按钮
                            $("#location").hide();
                            $("#accredit").show();
                            $("#flag").hide();
                        }
                        // 选中节点，根据id筛选
                        console.info(obj);

                    }, "json");
                }else{//增加
                    //图标默认赋值
                    form.val('myfrom',{
                        "icon":"layui-icon-tree"
                    })
                    $("#location").hide();  //地址隐藏
                    $("#accredit").hide();  //授权隐藏
                    $("#flag").show(); // 图标显示
                }

//                获取zTree对象，可以调用zTree方法
//                var treeObj = treeSelect.zTree('tree');
//                console.log(treeObj);

//                刷新树结构
//                treeSelect.refresh('tree');
            }

        });


        //自定义验证规则
        form.verify({
            title: function (value) {
                if (value.length < 5) {
                    return '标题至少得5个字符啊';
                }
            }
            , pass: [
                /^[\S]{6,12}$/
                , '密码必须6到12位，且不能出现空格'
            ]
            , content: function (value) {
                layedit.sync(editIndex);
            }
        });

        let num = 0;
        //监听提交
        form.on('submit(myform)', function (data) {
            console.info(data)
            num++;
            //只能点击一次
            if(num==1) {
                //编辑 父级不嫩选择自己
                //获取所编辑的模块ID
                var id = getQueryString("id");
                //获取提交的父级ID
                var fatherId = data.field.modModuleId;
                if (id == fatherId) {
                    // layer.msg("不能选择自己作为上级模块！",{time:1000,icon:1},function(){
                    //     table.reload("test");
                    // });
                    parent.errorCloseOpen("不能选择自己作为上级模块！");
                    return;
                }
                //判断是目录 菜单  按钮
                var formData = null;
                if ($("input[type=radio][name=type]:checked").val() == '1') {//目录
                    formData = new FormData();
                    formData.append("modModuleId", $("#mid").val());//父级id
                    formData.append("moduleId", $("#moduleId").val());//模块id
                    formData.append("icon", $("#iconPicker").val());//图标
                    formData.append("comments", $("#comments").val());//模块说明
                    formData.append("whetherValid", $("#whetherValid").val()); // 是否有效
                    formData.append("moduleName", $("#moduleName").val());  // 模块名称
                    formData.append("type", '1');  // 类型
                } else if ($("input[type=radio][name=type]:checked").val() == '2') {//菜单
                    formData = new FormData(document.getElementById("myfrom1"))
                } else {//按钮
                    formData = new FormData();
                    formData.append("modModuleId", $("#mid").val());//父级id
                    formData.append("moduleId", $("#moduleId").val());//模块id
                    formData.append("moduleName", $("#moduleName").val());  // 模块名称
                    formData.append("type", '3'); // 类型
                    formData.append("whetherValid", $("#whetherValid").val()); // 是否有效
                    formData.append("comments", $("#comments").val());//模块说明
                    formData.append("perms", $("#perms").val());//授权
                }
                $.ajax({
                    url: "/perModule/insertUpdateModule",
                    data: formData,
                    processData: false,
                    contentType: false,
                    dataType: 'json',
                    type: 'POST',
                    success: function (obj) {
                        if (obj.status == 20) {
                            parent.closeOpen(obj.message);
                        } else {
                            parent.closeOpen(obj.message);
                        }
                    },
                    error: function () {

                    }
                })
            }
            return false;
        });




        //表单取值
        layui.$('#LAY-component-form-getval').on('click', function () {
            var data = form.val('example');
            alert(JSON.stringify(data));
        });


        $(function () {
            //文件查看
            $('#imgFile').change(function () {
                //获取input file的files文件数组;
                //$('#usersImage')获取的是jQuery对象，.get(0)转为原生对象;
                //这边默认只能选一个，但是存放形式仍然是数组，所以取第一个元素使用[0];
                var file = $('#imgFile').get(0).files[0];
                //创建用来读取此文件的对象
                var reader = new FileReader();
                //使用该对象读取file文件
                reader.readAsDataURL(file);
                //读取文件成功后执行的方法函数
                reader.onload = function (e) {
                    //读取成功后返回的一个参数e，整个的一个进度事件
                    console.log(e);
                    //选择所要显示图片的img，要赋值给img的src就是e中target下result里面
                    //的base64编码格式的地址
                    $('#prePic').get(0).src = e.target.result;
                }
            });
        })

    });

    /**
     得到地址栏的参数
     */
    function getQueryString(name) {
        var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)");
        var r = window.location.search.substr(1).match(reg);
        if (r != null) return unescape(r[2]);
        return null;
    }
</script>
</html>
